<template>
  <AnalysisWrap titleText="模型剖切" info="提示:先图上点选模型后，设置剖切方向及距离。" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">选择模型：</span>
        <mars-button class="btn" @click="onCheckedModel">图上选点</mars-button>
        <span class="checkModelText">{{ checkedModel }} </span>
      </div>
      <div class="control">
        <span class="lable">按线剖切：</span>
        <mars-button class="btn" @click="onDrawLine">绘制线</mars-button>
      </div>
      <div class="control">
        <span class="lable">按面裁剪：</span>
        <mars-button class="btn" @click="onDrawPoly">绘制面</mars-button>

        <a-radio-group v-model:value="radioClip" @change="onChangeOutsideClip">
          <a-radio value="0">内裁</a-radio>
          <a-radio value="1">外裁</a-radio>
        </a-radio-group>
      </div>
      <div class="control">
        <span class="lable">剖切方向：</span>
        <div class="button-group">
          <div class="button-item" @click="chooseDistance('ZR', 1)">顶</div>
          <div class="button-item" @click="chooseDistance('Z', 2)">底</div>
          <div class="button-item" @click="chooseDistance('XR', 3)">东</div>
          <div class="button-item" @click="chooseDistance('X', 4)">西</div>
          <div class="button-item" @click="chooseDistance('Y', 5)">南</div>
          <div class="button-item" @click="chooseDistance('YR', 6)">北</div>
        </div>
      </div>
      <div class="control">
        <span class="lable">剖切距离：</span>
        <mars-slider class="distance-slider" @change="onClipDistance" v-model:value="textClipDis" :min="sliderMin" :max="sliderMax" :step="1" />
        <mars-input-number class="distance-input" @change="onClipDistance" v-model:value="textClipDis" :step="1" />
      </div>
      <div class="control-play">
        <mars-button class="btn" danger @click="removeModelClipData">清除</mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onUnmounted(() => {
  mapWork.onUnmountedModelClip()
})

const textClipDis = ref<number>(0)
const radioClip = ref<string>("0")

// 绘制线
const onDrawLine = () => {
  mapWork.onDrawLine()
}

// 绘制面
const onDrawPoly = () => {
  mapWork.onDrawPoly(radioClip.value)
}

// 改变内外裁剪状态
const onChangeOutsideClip = () => {
  mapWork.onChangeOutsideClip(radioClip.value)
}

// 选择模型
const checkedModel = ref<string>("未选择")
const sliderMin = ref<number>(-100)
const sliderMax = ref<number>(100)

const onCheckedModel = () => {
  mapWork.onCheckedModel().then((e) => {
    sliderMin.value = -e.radius
    sliderMax.value = e.radius

    checkedModel.value = "已选择“" + e.name + "”"
  })
}

// 剖切距离的滑动条
const onClipDistance = () => {
  mapWork.onClipDistance(textClipDis.value)
}

// 选择方向迫切模型
const clippingValue = ref<string>("0")

const chooseDistance = (direction, value) => {
  mapWork.clipping(direction)
  clippingValue.value = value
}

// 清除剖切的数据
const removeModelClipData = () => {
  mapWork.clearModelClipData()
}
</script>
<style scoped lang="less">
.model-clip_direction {
  margin-top: 25px;
  margin-bottom: 10px;
  :deep(.ant-space) {
    flex-wrap: wrap;
  }
  :deep(.ant-slider) {
    width: 145px !important;
  }
  :deep(.mars-input-number) {
    width: 53px;
  }
}

.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    width: 70px;
    font-size: 14px;
    text-align: center;
    color: rgba(234, 242, 255, 0.8);
  }
  .btn {
    width: 90px;
    height: 32px;
    margin-right: 10px;
  }

  .button-group {
    height: 32px;
    width: 226px;
    display: flex;
    background-color: rgba(51, 133, 255, 0.8);
    border: 1px solid rgba(143, 188, 255, 0.4);
    border-radius: 2px;
    .button-item {
      width: 38px;
      text-align: center;
      line-height: 32px;
      border-right: 1px solid rgba(143, 188, 255, 0.4);
      cursor: pointer;
      &:last-child {
        border-right: 0px;
      }
    }
  }
  .checkModelText {
    color: rgba(234, 242, 255, 0.6);
  }
  .distance-slider {
    width: 148px;
    margin: 0px 6px 0px 0px;
  }
  .distance-input {
    width: 70px;
    height: 32px;
  }
}

.control-play {
  display: flex;
  .btn {
    flex: 1;
    &:nth-child(n + 2) {
      margin-left: 4px;
    }
  }
}

:deep(.ant-radio-group) {
  display: flex;
  padding-left: 5px;
  justify-content: space-between;
}
:deep(.ant-radio-group label) {
  margin-right: 0px;
}
:deep(.ant-radio-inner) {
  border-radius: 0px;
}

:deep(.ant-radio-inner::after) {
  border-radius: 0px !important;
}
</style>
